<template lang='pug'>
  .page
    .search-form.mb-10.pl-10.pr-10
      Row(type="flex" justify="start")
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 姓名：
          Input(v-model="formData.userName" placeholder="请输入" clearable)
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          Button.ml-15(v-if="hasFind" type="info" @click="searchBtn") 查询
    .AccountsReceivableManage
      .pl-20.pr-20.bg-white
        Table.hasTitle-table.beautiful-table(:columns="thead" :data="tableData" :stripe="true" ref="demoTable" @on-selection-change="handleOnSelectChange")
          .clearfix.font-16(slot="header")
            .table-title-lefttxt.pull-left
              |合计
              span.text-info.pl-5.pr-5.font-weight {{tableComone.totalRows}}
              |条
            .pull-right.table-title-btns
              Button.mr-10(v-if="hasAdd" type="info" @click="handleShowCreateModal()") 新建
              Button.mr-10(v-if="hasImport" type="info" @click="handleShowBatchImportModal()") 导入
              Button.mr-10(v-if="hasExport" type="info" @click="exportBtn") 导出

          .clearfix.pl-20.pr-20(slot="footer")
            Page(
              :total="tableComone.totalRows"
              @on-change="onChangePage"
              @on-page-size-change="onpageSizeChange"
              show-sizer
              show-total
              placement="top"
              prev-text="上一页"
              next-text="下一页"
              :page-size-opts="[10, 20, 30, 50, 100]"
            )
          template(slot-scope="{ row, index }" slot="action")
            Button.mr-10(v-if="hasUpdate" type="text" size="small" @click="handleShowCreateModal(row)") 编辑

    //- 新建弹窗
    CreateModal(ref="CreateModal" @query="searchFn")

    //- 批量导入弹窗
    BatchImportModal(ref="BatchImportModal" @query="searchFn")
</template>


<script>
import { SalesCustomerConfigApi } from './SalesCustomerConfig.api.js';
import _cloneDeep from 'clone-deep'
import { listThead } from './tableHead.js'
import CreateModal from './modal/CreateModal.vue'
import BatchImportModal from '@/components/upload/batchImportModal'

export default {
  name: 'hrdc-sales-basedata',

  props: {},

  components: { CreateModal, BatchImportModal },

  data () {
    return {
      thead: _cloneDeep(listThead),
      tableData: [],
      selectedId: [], // 勾选的id集合,array格式
      selectedArr: [], // 勾选的id, name数组集合
      tableComone: {
        pageIndex: 1,
        totalRows: 0,
        pageSize: 10
      },
      formData: {
        userName: ''
      }
    }
  },


  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    // 查询
    hasFind () {
      return this.actionArr.indexOf('Find') > -1
    },
    // 查看
    hasView () {
      return this.actionArr.indexOf('View') > -1
    },
    // 新增
    hasAdd () {
      return this.actionArr.indexOf('Add') > -1
    },
    // 编辑
    hasUpdate () {
      return this.actionArr.indexOf('Update') > -1
    },
    // 导入
    hasImport () {
      return this.actionArr.indexOf('Import') > -1
    },
    // 导出
    hasExport () {
      return this.actionArr.indexOf('Export') > -1
    },
    // 删除
    hasDelete () {
      return this.actionArr.indexOf('Delete') > -1
    },
  },

  watch: {},

  beforeMount () {},

  mounted () {
    this.query()
  },

  methods: {
    // 搜索
    searchFn () {
      this.tableComone.pageIndex = 1
      this.query()
    },

    // 分页页码变动
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },

    // 表格选择操作
    handleOnSelectChange (value) {
      this.selectedArr = value.map((item) => {
        return { id: item.id, name: item.userName }
      })
      this.selectedId = value.map((item) => {
        return item.id
      })
      console.log('列表勾选数组1', this.selectedArr)
      console.log('列表勾选数组2', this.selectedId)
    },

    // 分页页码变动
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.query()
    },

    searchBtn () {
      this.tableComone.PageIndex = 1
      this.query()
    },

    // 获取列表
    query() {
      var params = {
        ...this.formData,
        HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize,
      }
      SalesCustomerConfigApi.GetList(params).then(resp => {
        console.log('%c resp: ', 'color:red', resp)
        if (resp.data.success) {
          this.tableData = resp.data.data
          this.tableComone.totalRows = resp.data.totalRows
        }
      })
    },

    // 打开新建/编辑弹窗
    handleShowCreateModal(row) {
      this.$refs.CreateModal.show(row)
      this.$refs.CreateModal.createModalTitle = row ? '编辑' : '新建'
    },

    // 打开批量导入弹窗
    handleShowBatchImportModal() {
      this.$refs.BatchImportModal.show()
      this.$refs.BatchImportModal.importConfig = {
        actionUrl: '/api/SalesCustomerConfig/Import',
        templateDownLoadUrl: baseUrl + 'Content/Template/批量批入销售基础数据配置模板.xlsx?random='
      }
    },

    // 导出
    exportBtn () {
      SalesCustomerConfigApi.Export({
        ...this.formData,
        ids: this.selectedId.join(',')
      }).then(res => {
        if (res.data.success) {
          let objectUrl = res.data.data
          console.log(objectUrl)
          const link = document.createElement('a')
          link.download = ''
          link.href = objectUrl
          link.click()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
  },
}
</script>